<template>
	<view style="height: 100vh;">
		<!-- <image class="topimg" src="../../../static/img/indexBanner.png" mode=""></image> -->
		<image v-show="data.type==1" class="topimg" :src="'https://admin.lykangshu.top'+data.work_photos" mode="">
		</image>
		<image v-show="data.type==2" class="topimg" :src="'https://admin.lykangshu.top'+data.store_photo" mode="">
		</image>
		<view class="all">
			<view class="one flex_sp">
				<view class="left">
					<image v-show="data.type==1" class="img1" :src="'https://admin.lykangshu.top'+data.work_photos"
						mode=""></image>
					<image v-show="data.type==2" class="img1" :src="'https://admin.lykangshu.top'+data.store_photo"
						mode=""></image>
					<view v-show="data.type==1">
						{{data.name}}
					</view>
					<view v-show="data.type==2">
						{{data.store_name}}
					</view>
				</view>
				<view class="right">
					<image class="img1" src="../../../static/img/site.png" mode=""></image>
					<view>
						{{data.distance}}Km
					</view>
				</view>
			</view>
			<view class="two flex_sp">
				<view class="two">
					<image class="img1" src="../../../static/img/badge.png" mode=""></image>
					<view>
						资质认证
					</view>
					<image class="img2" src="../../../static/img/rightArrow.png" mode=""></image>
				</view>
				<view v-show="data.collection_type==0" style="color: #FB774B; font-size: 13px;" @click="collection()">
					收藏
				</view>
				<view v-show="data.collection_type==1" style="color: #FB774B; font-size: 13px;" @click="collection()">
					取消收藏
				</view>
			</view>
			<view class="three">
				<view class="box" v-for="(item , index) in data.label" :key="index">
					{{item}}
				</view>
			</view>
			<view class="four">
				<view class="two" v-show="data.type==2">
					<image class="img1" src="../../../static/img/shop.png" mode=""></image>
					<view>
						{{data.store_name}}
					</view>
				</view>
				<view class="bottom">
					<view class="box">
						<view class="left">
							<view class="top">
								{{data.single_quantity}}单
							</view>
							<view class="bot">
								最近接单
							</view>
						</view>
					</view>
					<view class="box">
						<view class="left">
							<view class="top">
								{{data.score}}分
							</view>
							<view class="bot">
								评分
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="five">
				<image src="../../../static/detil/four.png" mode=""></image>
				<image src="../../../static/detil/three.png" mode=""></image>
				<image src="../../../static/detil/two.png" mode=""></image>
				<image src="../../../static/detil/one.png" mode=""></image>
			</view>
			<view class="six">
				<u-subsection :list="list" :current="current" @change="tabs"></u-subsection>
				<view v-show="current==0">
					{{data.introduce}}
				</view>
				<view v-show="current==1">
					<view class="lists">
						<view class="title">
							服务项目
						</view>
						<view class="list">
							<view class="box3" v-for="(item , index) in data.project" :key="index"
								@click="project(item.id)">
								<image class="img1" :src="'https://admin.lykangshu.top'+item.image" mode=""></image>
								<view class="center">
									<view class="one">
										{{item.name}}
									</view>
									<view class="two">
										<image class="img2" src="../../../static/detil/time.png" mode=""></image>
										{{item.duration}}分钟
									</view>
									<view class="three2">
										<text class="s1">{{item.price}}</text>元/次
									</view>
									<view class="four">
										已出{{item.sales}}份
									</view>
								</view>
								<view class="bot">
									下单
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="current==2">
					<view class="seven">
						<view class="title">
							评价（100）
						</view>
						<view class="detillist">
							<view class="every" :class="{active:type==index}" v-for="(item , index) in info"
								:key="index" @click="comment(index)">
								{{item}}
							</view>
						</view>
						<u-empty v-show="datashow" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
						<view class="lists" v-show="!datashow">
							<view class="box" v-for="(item , index) in coment" :key="index">
								<view class="top">
									<image class="img1" :src="'https://admin.lykangshu.top'+item.avatar" mode="">
									</image>
									<view>
										<view class="top_one">
											{{item.nickname}}
										</view>
										<u-rate v-model="item.comprehensive" activeColor="#FB774B"></u-rate>
									</view>
								</view>
								<view class="center">
									{{item.content}}
								</view>
								<view class="solid">

								</view>
								<view class="bot flex_sp">
									<view class="miaosu">
										真实描述：{{item.real}}星
									</view>
									<view class="miaosu">
										服务技能：{{item.skill}}星
									</view>
									<view class="miaosu">
										服务态度：{{item.attitude}}星
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: ['介绍', '服务项目', '评价'],
				current: 0,
				info: ['全部', '有内容', '好评', '中评', '差评'],
				id: "",
				count: 0,
				data: {},
				type: 0,
				coment: [],
				datashow: false,
				cary: "",
				lon: '',
				lat: ""
			};
		},
		onLoad(option) {
			this.id = option.id
			uni.showLoading()
			const that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					uni.hideLoading()
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.lon = res.longitude
					that.lat = res.latitude
					that.getdetil()
				}
			});
		},
		methods: {
			project(i) {
				this.$api("/api/project/appointment", 'post', {
					member_id: this.data.id,
					project_id: i,
					city: "郑州市",
					longitude: this.lon,
					latitude: this.lat
				}).then((res) => {
					console.log(res);
					if (res.data.code == 1) {
						uni.$u.toast(res.data.msg)
						uni.navigateTo({
							url: '/pages/index/project/project?id=' + i + "&id2=" + this.data.id
						})
					} else {
						uni.$u.toast(res.data.msg)
					}
				}).catch((err) => {
					console.log(err);
					uni.$u.toast(err.data.msg)
				})
			},
			//获取数据
			async getdetil() {
				const res = await this.$api("/api/project/details", 'post', {
					id: this.id,
					latitude: this.lat,
					longitude: this.lon
				}).then((res) => {
					console.log(res);
					this.data = res.data.data
				})
			},
			//收藏
			collection() {
				this.$api('/api/project/collection', 'post', {
					id: this.data.id
				}).then((res) => {
					console.log(res);
					if (res.data.code == 1) {
						this.getdetil()
					}
				})
			},
			//评论切换
			comment(i) {
				this.type = i
				this.getcommentlist()
			},
			//tab切换
			tabs(e) {
				this.current = e
				if (e == 2) {
					this.getcommentlist()
				}
			},
			//评论列表
			async getcommentlist() {
				const res = this.$api("/api/project/comment", 'post', {
					id: this.data.id,
					type: this.type,
					offset: "1"
				}).then((res) => {
					console.log(res);
					if (res.data.data.comment.length == 0) {
						this.datashow = true
					} else {
						this.datashow = false
					}
					this.coment = res.data.data.comment
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.topimg {
		width: 100%;
		height: 200px;
	}

	.all {
		padding: 15px;

		.seven {
			.title {
				margin: 10px 0;
				font-size: 15px;
				font-weight: bold;
				color: #333333;
			}

			.detillist {
				display: flex;

				.every {
					background: #FB774B;
					border-radius: 24px;
					font-size: 12px;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					padding: 5px 10px;
					margin: 5px;
					opacity: .3;
				}

				.active {
					background: #FB774B;
					border-radius: 24px;
					font-size: 12px;
					font-weight: 400;
					padding: 5px 10px;
					margin: 5px;
					text-align: center;
					color: #FFFFFF;
					opacity: 1;
				}
			}

			.lists {
				margin: 10px 0;

				.box {
					box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.05);
					border-radius: 10px 10px 10px 10px;
					padding: 15px 5px;
					margin: 10px 0;

					.top {
						font-size: 14px;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;

						.img1 {
							margin: 0 10px;
							width: 45px;
							height: 45px;
							border-radius: 50%;
						}
					}

					.center {
						margin-top: 10px;
						padding: 0 10px;
						font-size: 13px;
						font-weight: 400;
						color: #333333;
					}

					.solid {
						width: 100%;
						height: 1px;
						background-color: #eeeeee;
						margin: 10px 0;
					}

					.bot {
						.miaosu {
							flex: 1;
							text-align: center;

							font-size: 12px;
							font-weight: 400;
							color: #FB774B;
						}
					}
				}
			}
		}

		.six {
			margin: 10px 0;

			.lists {
				.title {
					margin: 10px 0;
					font-size: 15px;
					font-weight: bold;
					color: #333333;
				}

				.list {
					margin: 10px 0;

					.box3 {
						padding: 10px;
						display: flex;
						align-items: center;
						border-bottom: 1px solid #eeeeee;

						// justify-content: center;
						.img1 {
							width: 95px;
							height: 95px;
							border-radius: 10px;
						}

						.center {
							margin-left: 10px;
							flex: 1;

							.one {
								font-size: 15px;
								font-weight: bold;
								color: #333333;
								margin: 5px 0;
							}

							.two {
								margin: 5px 0;

								.img2 {
									width: 14px;
									height: 14px;
								}

								font-size: 12px;
								font-weight: 400;
								color: #666666;
							}

							.three2 {
								margin: 5px 0;
								font-size: 12px;
								font-weight: bold;
								color: #FD845C;

								.s1 {
									font-size: 20px;
									font-weight: 900;
									color: #FD845C;
								}
							}

							.four {
								font-size: 10px;
								font-weight: 400;
								color: #666666;
							}
						}

						.bot {
							background: linear-gradient(90deg, #FD845C 0%, #FF6B55 100%);
							box-shadow: 0px 3px 6px 1px #FFAB9D;
							border-radius: 26px;
							font-size: 13px;
							font-weight: bold;
							color: #FFFFFF;
							text-align: center;
							padding: 5px 10px;
						}
					}
				}
			}
		}

		.one {
			margin-top: -45px;

			.left {
				font-size: 16px;
				font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;

				.img1 {
					width: 80px;
					height: 80px;
					margin: 0 10px;
				}
			}

			.right {
				display: flex;
				align-items: center;

				font-size: 11px;

				font-weight: 400;
				color: #999999;

				.img1 {
					width: 14px;
					height: 14px;
					margin: 0 5px;
				}
			}
		}

		.two {
			display: flex;
			align-items: center;
			font-size: 15px;
			font-weight: bold;
			color: #333333;

			.img1 {
				width: 30px;
				height: 30px;
			}

			.img2 {
				width: 12px;
				height: 12px;
			}
		}

		.three {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;

			.box {
				background: #FEE3C5;
				border-radius: 40px 40px 40px 0px;
				text-align: center;
				padding: 5px 10px;
				margin: 5px;
				font-size: 13px;
				font-weight: 400;
				color: #FB774B;
			}
		}

		.four {
			.bottom {
				background: #FFF2E2;
				border-radius: 5px;
				padding: 15px;
				display: flex;
				align-items: center;
				margin: 10px 0;

				.box {
					flex: 1;
					text-align: center;

					.top {
						font-size: 18px;
						font-weight: bold;
						color: #FB774B;
						margin: 5px 0;
					}

					.bot {
						font-size: 12px;
						font-weight: 400;
						color: #333333;
						margin: 5px 0;
					}
				}
			}
		}

		.five {
			display: flex;
			align-items: center;

			image {
				flex: 1;
				margin: 0 5px;
				height: 30px;
			}
		}

	}
</style>